<template>
  <div>
    <LevelBg>
      <template #levelBg>
        <img class="hs" src="../assets/onehs.png" alt />
      </template>
      <template #num>第一关</template>
      <template #title>独具慧眼</template>
      <template #key>对IHG够了解吗？先从这里开始暖身吧！</template>
      <template #desc>60秒内完成IHG中国旗下酒店logo配对者</template>
      <template #btn>
        <img @click="start" src="../assets/sBtn.png" style="height:38px;width:137px;" />
      </template>
    </LevelBg>
    <img class="star" :class="{starmove:move}" src="../assets/star.png" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      move: false
    };
  },
  methods: {
    start() {
      this.move = true;
    },
    goNext(){
      this.$router.push('m1')
    }
  },
  mounted() {
    addEventListener('animationend',this.goNext)
  }
};
</script>

<style scoped>
.hs {
  position: absolute;
  width: 125px;
  height: 85px;
  left: 14.5px;
  top: 12px;
}
.star {
  width: 26px;
  height: 24px;
  position: absolute;
  top: 300px;
  left: 19px;
}
@keyframes starMove {
  0% {
    top: 300px;
  }
  12.5% {
    top: 290px;
  }
  25% {
    top: 300px;
  }
  37.5% {
    top: 310px;
  }
  50% {
    top: 300px;
  }
  67.5% {
    top: 290px;
  }
  75% {
    top: 300px;
  }
  87.5% {
    top: 310px;
  }
  100% {
    top: 300px;
  }
}
.starmove {
  animation: starMove 3s linear;
}
</style>
